<template>
	<el-radio-group 
		v-model="radioValue" 
		:disabled="disabled" 
		@change="change">
		<el-radio
			v-for="item in optionLists"
			:key="optionKey ? item[optionKey.value] : item.value"
			:label="optionKey ? item[optionKey.value] : item.value"
			:disabled="item.disabled ? item.disabled : false">
			<span v-if="showLabel.length > 0">
				<span v-for="itemIndex in showLabel" :key="itemIndex+''">{{ item[itemIndex] }}</span>
			</span>
			<span v-else>{{ optionKey ? item[optionKey.label] : item.label }}</span>
		</el-radio>
	</el-radio-group>
</template>

<script nonce="6360902663BBFC3CF01D515DDD4482AA1DC819DE">
import { findByUrl } from "@/api/dict";

	export default {
		name: 'KtRadio',
		props: {
			value: String,
			options: String, // radio选项列表JSON串，如此项有值，则直接用此选项中的数据，不会进行数据请求去获取数据。即优先级options>url。默认为空，非必传。
			url: { // 请求选择项URL地址，默认数据字典请求接口地址，非必传。
				type: String,
				default: '',
			},
			urlCode: String, // 请求数据字典时的参数值，若url为数据字典请求地址，则必传，其余情况非必传。
			urlParams: String, // 接口其余请求参数的JSON串，非必传。
			disabled: { // 是否禁用，默认false，非必传。
				type: Boolean,
				default: false,
			},
			optionKeys: String, // 指定显示的vaule和label的key值JSON串，若此项有值，则不再用'value'和'label'作为属性名，以此项设置为准，默认空，非必传。
			showLabels: String, // 可选项展示值字符串，逗号隔开，若此项有值，则可选项所展示文字不再用'label'的值，以此项设置为准，展示时按照顺序展示出来。默认空，非必传。
		},
		data() {
			return {
				optionLists: [],
				optionKey: null,
				requestParams: null,
				showLabel: [],
				radioValue: this.value,
			};
		},
		watch: {
			options() {
				if(this.options)
					// this.optionLists = JSON.parse(this.options)
				this.optionLists = this.options

			},
			urlCode() {
				this.getOptions();
			},
			urlParams() {
				this.requestParams = this.urlParams ? JSON.parse(this.urlParams) : null;
				this.getOptions();
			},
			url() {
				this.getOptions();
			},
			value() {
				this.selectValue = this.value
			},
			optionKeys() {
				this.optionKey = this.optionKeys ? JSON.parse(this.optionKeys) : null;
			},
			showLabels() {
				this.showLabel = this.showLabels ? this.showLabels.split(',') : [];
			},	
		},
		created() {
			this.optionKey = this.optionKeys ? JSON.parse(this.optionKeys) : null;
			this.showLabel = this.showLabels ? this.showLabels.split(',') : [];
			this.requestParams = this.urlParams ? JSON.parse(this.urlParams) : null;
			if (this.options) { // 如果父组件有可选项数据，则不进行数据请求
				this.optionLists = JSON.parse(this.options)
			} else {
				this.getOptions()
			}
		},
		methods: {
			/**
			* 获取选择项数据
			**/
			getOptions() {
				let params = {}
				if (this.urlCode)
					params.code = this.urlCode
				if(this.requestParams) {
					params = Object.assign(params, this.requestParams)
				}

        // 获取下拉框的选择项数据
        findByUrl(this.url).then((res) => {
          this.optionLists = res.data; 
        }).catch(() => {})
			},
			/**
			* 选择框选中时触发
			* @val {String} 当前选中值
			**/
			change(val) {
				let valueKey = 'value'
				if (this.optionKey) 
					valueKey = this.optionKey.value
				
				const valOption = this.optionLists.filter(itemO => itemO[valueKey] === val);
				const [valObj] = valOption;
				this.$emit('change', val, valObj);
			},
		},
	}
</script>

<style nonce="6360902663BBFC3CF01D515DDD4482AA1DC819DE" scoped>

</style>
